<template>
  <div id="righttop">
    <!-- <div class="shiji">
      <el-icon style="color: rgb(198, 103, 103);margin-top: 1.5%;margin-left: 2%;font-size: 22px;"><StarFilled /></el-icon>
      <h1  class="diming">襄阳</h1>
      <h2  class="diming" style="margin-top: 1.2%;">唐朝（618年—907年）</h2>
      <hr style="margin-left: 10%;margin-bottom: 3%;margin-top: 1%;margin-right: 1%;">
      <p class="jieshao">  杜甫，字子美，自号少陵野老，祖籍襄阳（今属湖北），但他并非直接出生于襄阳，而是自其曾祖时迁居至河南巩县（今河南省巩义市西南），因此，杜甫的实际出生地是河南巩县。</p>
    </div> -->
<div class="shiji">
      <el-icon style="color: rgb(198, 103, 103); margin-top: 1.5%; margin-left: 2%; font-size: 22px;"><StarFilled /></el-icon>
      <h1 v-if="!selectedRegionData" class="diming">襄阳</h1>
      <h1 v-else class="diming">{{ selectedRegionData.old_name }}</h1>
      <h2 class="diming" style="margin-top: 1.2%;">唐朝（618年—907年）</h2>
      <hr style="margin-left: 10%; margin-bottom: 3%; margin-top: 1%; margin-right: 1%;">
      <p v-if="!selectedRegionData" class="jieshao">杜甫，字子美，自号少陵野老，祖籍襄阳（今属湖北），但他并非直接出生于襄阳，而是自其曾祖时迁居至河南巩县（今河南省巩义市西南），因此，杜甫的实际出生地是河南巩县。</p>
      <p v-else class="jieshao">{{ selectedRegionData.introduction }}</p>
    </div>
  </div>
</template>

<script>
import place from "@/assets/json/地区介绍.json";
import { mapGetters } from 'vuex';
export default{
  name:"RightTop",
  computed: {
    ...mapGetters(['selectedRegionData']), //  getter筛选数据
  },
}


</script>

<style>
#righttop {
 width: 100%;
 height: 100%;
 border-top: 2px solid rgb(111, 108, 108); /* 设置上边框为1像素宽的实线，颜色为黑色 */

}
.shiji{
  margin-top: 1%;
  background-color: rgba(255, 255, 255, 0.5); /* 白色背景，50% 透明度 */
  height: 117%;
}
.diming{
  margin-left: 10%;
  font-family: '宋体', SimSun, sans-serif
}
.jieshao{
  margin-left: 10%;
  font-family: '宋体', SimSun, sans-serif;
  text-indent: 2em; 
  margin-right: 1%;
  margin-top:1%
}
hr {
  border: none;
  border-top: 1px solid #5a93ac; /* 或者你想要的颜色 */
}

</style>
